/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: kanglang
 * @LastEditTime: 2020-10-21 17:20:54
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  Text,
  TouchableOpacity,
  PixelRatio,
  ScrollView,
} from 'react-native';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  fontColorDeepRed,
  fontColorBlack,
  fontColorLightGray,
  fontColorCoffee,
  screenWidth,
  px2dp,
  screenHeight,
  splitLineColorLightGray,
  fontColorSecDeepGray,
  mainBgColorBlack,
} from '../../../../../common/styles';
import { Button, msg } from '../../../../../common';
import SelectItem from './select-item';
import { fetchTruckTypes, fetchTruckLengths } from '../../../../../api/source-release';

const { Submit } = Button;

export default class CarNeed extends Component {
  constructor(props) {
    super(props);
    this.state = {
      transportation: [], // 选择的用车类型
      truckTypes: null, // 车型选项
      truckType: [], // 选择的车
      truckLengths: null, // 车长选项
      truckLength: [], // 选择的车长
      isSubmit: false,
    };
  }

  componentDidMount() {
    fetchTruckTypes().then((res) => {
      if (res.success) {
        this.setState({ truckTypes: res.data });
      }
    });
    fetchTruckLengths().then((res) => {
      if (res.success) {
        this.setState({ truckLengths: res.data });
      }
    });

    // 回显
    const { transportation, truckLength, truckType } = this.props;
    console.log('------transportation--------->', typeof transportation);
    console.log('------truckLength--------->', truckLength);
    console.log('------truckType--------->', truckType);
    this.setState({
      transportation: transportation ? [transportation] : ['1'], // 默认选中整车
      truckLength: truckLength ? truckLength.split(',') : [],
      truckType: truckType ? truckType.split(',') : []
    });
  }

  render() {
    const {
      transportation,
      truckTypes,
      truckType,
      truckLengths,
      truckLength,
      isSubmit,
    } = this.state;
    const { onChangeModal } = this.props;
    return (
      <Modal
        animationType='slide'
        transparent
        visible
        onRequestClose={() => {
          onChangeModal({ type: 'carNeedIsShow', val: false });
          // msg.emit('router: back');
        }}
        onShow={() => { }}
      >
        <TouchableOpacity
          style={styles.mask}
          onPress={() => {
            onChangeModal({ type: 'carNeedIsShow', val: false });
          }}
        />
        <View style={styles.infoContainer}>
          <View style={styles.header}>
            <TouchableOpacity
              style={styles.cancel}
              onPress={() => {
                onChangeModal({ type: 'carNeedIsShow', val: false });
              }}
            >
              <Text style={{ fontSize: px2dp(32), color: fontColorSecDeepGray }}>
                取消
              </Text>
            </TouchableOpacity>
            <Text
              style={{
                fontSize: px2dp(32),
                color: fontColorBlack,
                fontWeight: 'bold',
              }}
            >
              用车需求
            </Text>
            <Submit
              text='确定'
              boxStyle={{
                width: px2dp(104),
                height: px2dp(60),
                borderRadius: px2dp(8),
                position: 'absolute',
                right: px2dp(28),
              }}
              disabled={false}
              onClick={() => {
                this.submit();
              }}
            />
          </View>
          {/* 包装方式 */}
          <ScrollView style={styles.editContainer} showsVerticalScrollIndicator={false}>
            <View style={styles.packing}>
              <Text
                style={{
                  fontSize: px2dp(28),
                  fontWeight: 'bold',
                  color: mainBgColorBlack,
                }}
              >
                用车类型
              </Text>
              <View style={styles.packingSelect}>
                <SelectItem
                  name='整车'
                  type='transportation'
                  value='1'
                  activeVal={transportation}
                  onChange={(type, value) => this.onChange(type, value)}
                />
                <SelectItem
                  name='零担'
                  type='transportation'
                  value='2'
                  activeVal={transportation}
                  onChange={(type, value) => this.onChange(type, value)}
                />
              </View>
            </View>

            <View style={styles.packing}>
              <Text
                style={{
                  fontSize: px2dp(28),
                  fontWeight: 'bold',
                  color: mainBgColorBlack,
                }}
              >
                车型
                <Text
                  style={{
                    fontSize: px2dp(28),
                    fontWeight: 'normal',
                    color:
                      !isSubmit || truckType.length > 0
                        ? fontColorSecDeepGray
                        : 'red',
                  }}
                >
                  (必填，最多3项)
                </Text>
              </Text>
              <View style={styles.packingSelect}>
                {!!truckTypes &&
                  truckTypes.map((item) => {
                    return (
                      <SelectItem
                        name={item.name}
                        type='truckType'
                        value={item.name}
                        activeVal={truckType}
                        maxLength={3}
                        onChange={(type, value) => this.onChange(type, value)}
                      />
                    );
                  })}
              </View>
            </View>

            <View style={[styles.packing, { paddingBottom: 40 }]}>
              <Text
                style={{
                  fontSize: px2dp(28),
                  fontWeight: 'bold',
                  color: mainBgColorBlack,
                }}
              >
                车长
                <Text
                  style={{
                    fontSize: px2dp(28),
                    fontWeight: 'normal',
                    color:
                      !isSubmit || truckLength.length > 0
                        ? fontColorSecDeepGray
                        : 'red',
                  }}
                >
                  (必填，最多3项，单位: 米)
                </Text>
              </Text>
              <View style={styles.packingSelect}>
                {!!truckLengths &&
                  truckLengths.map((item) => {
                    return (
                      <SelectItem
                        key={item.id}
                        name={item.name}
                        type='truckLength'
                        value={item.name}
                        activeVal={truckLength}
                        maxLength={3}
                        onChange={(type, value) => this.onChange(type, value)}
                      />
                    );
                  })}
              </View>
            </View>
          </ScrollView>
        </View>
      </Modal>
    );
  }

  // 改变
  onChange = (type, val) => {
    console.log('type----', type, 'val--->', val);
    this.setState({ [type]: val });
  };

  // 提交
  submit = () => {
    const { transportation, truckType, truckLength, isSubmit } = this.state;
    const { onChangeModal, onChangeVal } = this.props;
    if (!transportation.length || !truckType.length || !truckLength.length) {
      this.setState({ isSubmit: true });
      return;
    }
    onChangeVal({
      type: 'supply',
      val: {
        transportation: transportation.join(),
        truckType: truckType.join(),
        truckLength: truckLength.join(),
      },
    });
    onChangeModal({ type: 'carNeedIsShow', val: false });
  };
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    justifyContent: 'center',
  },
  mask: {
    width: screenWidth,
    height: screenHeight,
    backgroundColor: 'rgba(0,0,0,0.2)',
    position: 'absolute',
    left: 0,
    top: 0,
  },
  infoContainer: {
    width: screenWidth,
    maxHeight: 0.6 * screenHeight,
    backgroundColor: mainBgColorWhite,
    position: 'absolute',
    bottom: 0,
    left: 0,
    borderRadius: px2dp(12),
    overflow: 'hidden',
    zIndex: 10,
  },
  header: {
    width: screenWidth,
    height: px2dp(108),
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: splitLineColorLightGray,
  },
  cancel: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: 80,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  packing: {
    marginTop: px2dp(48),
  },
  packingSelect: {
    marginTop: px2dp(24),
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
  },
  selectItem: {
    width: px2dp(218),
    height: px2dp(72),
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(8),
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: px2dp(16),
    marginRight: px2dp(10),
  },
  editContainer: {
    paddingHorizontal: px2dp(32),
    paddingBottom: px2dp(100),
  },
});
